/**
 * @author lulongwen
 * Date: 2023-09-12 22:17
 * Description:
 */

import { useState, useEffect } from 'react';
import { string, func } from 'prop-types';
import { ColorPicker as AntdColorPicker } from 'antd';
import type { Color } from 'antd/es/color-picker';

ColorPicker.propTypes = {
  value: string,
  onChange: func,
};
ColorPicker.defaultProps = {
  onChange: () => {},
};

function ColorPicker(props: any) {
  const {
    value,
    onChange,
  } = props;
  const [color, setColor] = useState<Color | string>();

  useEffect(() => {
    setColor(value);
  }, [value]);

  function handleChange(colors: Color) {
    setColor(colors);
    onChange(colors.toRgbString(), colors);
  }

  return (
    <AntdColorPicker
      showText
      value={color}
      // onChange={handleChange}
      onChangeComplete={handleChange}
    />
  );
}

export default ColorPicker;
